<template>
	<view 
		class="scene-container"
		@touchstart="handleSceneTouch"
		@touchmove="handleSceneMove"
		@touchend="handleSceneEnd"
		@click="handleSceneClick"
		:style="{
			transform: `scale(${scale})`,
			transformOrigin: '0 0'
		}"
	>
		<view class="scene-background"></view>
		
		<DraggableItem
			v-for="(item, index) in items"
			:key="index"
			:x="item.x"
			:y="item.y"
			:color="item.color"
			:index="index"
			:type="item.type"
			:content="item.content"
			:isSelected="selectedIndex === index"
			:rotation="item.rotation"
			@dragStart="handleTouchStart"
			@dragMove="handleTouchMove"
			@dragEnd="handleTouchEnd"
			@resize="handleResize"
			@select="handleItemSelect"
			@rotate="handleRotate"
		/>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import DraggableItem from '@/components/DraggableItem/DraggableItem.vue'

// 所有可拖动项的数组
const items = reactive([
	{ 
		x: 100, 
		y: 100, 
		color: '#007AFF',
		type: 'text',
		content: '示例文本4',
		rotation: 0
	}
])

// 当前拖动项的索引
const currentDragIndex = ref(-1)

// 触摸起始点与元素位置的偏移量
const touchOffset = reactive({
	x: 0,
	y: 0
})

// 缩放相关状态
const scale = ref(1)
const initialScale = ref(1)
const startDistance = ref(0)

// 添加选中状态管理
const selectedIndex = ref(-1)

// 计算两个触摸点之间的距离
const getDistance = (touches) => {
	const dx = touches[1].clientX - touches[0].clientX
	const dy = touches[1].clientY - touches[0].clientY
	return Math.sqrt(dx * dx + dy * dy)
}

// 处理画布的触摸事件
const handleSceneTouch = (event) => {
	if (event.touches.length === 2) {
		// 记录初始两指距离
		startDistance.value = getDistance(event.touches)
		initialScale.value = scale.value
	}
}

const handleSceneMove = (event) => {
	if (event.touches.length === 2) {
		// 计算新的两指距离
		const newDistance = getDistance(event.touches)
		
		// 计算缩放比例
		const delta = newDistance / startDistance.value
		
		// 应用缩放，并限制缩放范围
		scale.value = Math.min(Math.max(initialScale.value * delta, 0.5), 3)
		
		// 阻止默认行为
		event.preventDefault()
	}
}

const handleSceneEnd = () => {
	startDistance.value = 0
}

// 添加新项目的方法
const addItem = (options) => {
	items.push({
		x: 150,
		y: 150,
		color: options.color || '#007AFF',
		type: options.type || 'text',
		content: options.content || '新项目',
		rotation: 0
	})
}

// 开始拖动
const handleTouchStart = ({ event, index }) => {
	currentDragIndex.value = index
	const touch = event.touches[0]
	
	touchOffset.x = touch.clientX - items[index].x
	touchOffset.y = touch.clientY - items[index].y
}

// 拖动中
const handleTouchMove = ({ event, index }) => {
	if (currentDragIndex.value !== index) return
	
	const touch = event.touches[0]
	
	items[index].x = touch.clientX - touchOffset.x
	items[index].y = touch.clientY - touchOffset.y
}

// 结束拖动
const handleTouchEnd = ({ index }) => {
	if (currentDragIndex.value === index) {
		currentDragIndex.value = -1
	}
}

// 处理大小调整
const handleResize = ({ index, width, height }) => {
	// 如果需要，可以在 items 数组中存储每个项目的大小
	if (items[index]) {
		items[index].width = width
		items[index].height = height
	}
}

// 处理图元选中
const handleItemSelect = ({ index }) => {
	selectedIndex.value = index
}

// 处理画板点击，取消选中
const handleSceneClick = () => {
	selectedIndex.value = -1
}

// 处理旋转事件
const handleRotate = ({ index, rotation }) => {
	if (items[index]) {
		items[index].rotation = rotation
	}
}

// 更新旋转角度的方法
const updateRotation = (angle) => {
	if (selectedIndex.value !== -1 && items[selectedIndex.value]) {
		items[selectedIndex.value].rotation = angle
	}
}

// 暴露方法给父组件
defineExpose({
	addItem,
	updateRotation,
	selectedIndex
})
</script>

<style>
.scene-container {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #ffffff;
	overflow: hidden;
	touch-action: none; /* 防止默认的触摸行为 */
	transition: transform 0.1s ease-out; /* 添加平滑过渡效果 */
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 添加网格背景 */
.scene-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		linear-gradient(to right, #f0f0f0 1px, transparent 1px),
		linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none; /* 确保不影响触摸事件 */
}
</style>